<template>
  <div class="p_progress">
    <!-- 左侧icon -->
    <div class="p_icon_container">
      <slot />
    </div>
    <!-- 进度条 -->
    <div class="p_progress_container_outer" :style="setProgressBgStyle" ref="progress">
        <!-- 进度条 -->
        <div class="p_progress-inner" ref="slider" :style="setProgressStyle" ></div>

        <!-- 滑块 -->
        <div class="p_progress_slider"></div>
    </div>
    <!-- 右侧显示进度百分比 样式2 -->
    <!-- 顶部显示进度百分比 样式1 -->
    <!--        <div class="progress_percent_container">-->
    <!--          <span class="text">58</span>-->
    <!--        </div>-->
<!--    <div></div>-->
    {{tempPercent}}
  </div>
</template>

<script>
/**
 *
 *
 * v-model
 */
export default {
  props: {
    // 进度条的最小值
    min: {
      type: Number,
      default: 0
    },
    // 进度条的最大值
    max: {
      type: Number,
      default: 100
    },
    // 进度条的宽度
    width: {
      type: Number,
      default: 300
    },
    // 滑块的宽度
    sliderWidth: {
      type: Number,
      default: 20
    },
    // 传递进来的值 v-model绑定的值
    percent: {
      type: Number,
      default: 60
    },
    // 进度条的颜色类型
    progressColor: {
      type: String,
      default: '#1890ff' // "#dcdfe6"
    }
  },
  data () {
    return {
      sliderLeft: 0, // 滑块相对于父元素 X坐标
      progressWidth: 0, // 进度条当前的宽度
      tempPercent: 0, // 临时缓存进度
    }
  },
  computed: {
    // 设置进度条的背景样式
    setProgressBgStyle() {
      return {
        // 加上滑块的宽度
        width: `${this.width + this.sliderWidth}px`
      }
    },

    // 设置进度条的样式
    setProgressStyle () {
      const color = this.progressColor
      return {
        width: `${this.progressWidth}px`,
        background: color
      }
    }
  },
  mounted() {
    this.sliderLeft = this.width / 100 * this.percent
    this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
    this.tempPercent = this.percent
    this.addListener()
  },
  methods: {
    addListener() {
      const slider = this.$refs.slider
      const progress = this.$refs.progress
      let isClickSlider = false
      let distance = 0 // 滑块与点击坐标的绝对距离
      progress.onclick = (e) => {
        // 阻止事件冒泡
        if (e.target == slider) {
          return
        }
        let curX = progress.offsetLeft
        this.sliderLeft = e.offsetX - curX
        if (this.sliderLeft <= 0) {
          this.sliderLeft = 0
        }
        if (this.sliderLeft >= this.width) {
          this.sliderLeft = this.width
        }
        this._countCurPercent()
      }
      slider.onmousedown = (e) => {
        isClickSlider = true
        let curX = slider.offsetLeft
        distance = e.pageX - curX // 得出绝对距离
      }
      progress.onmousemove = (e) => {
        if (isClickSlider) {
          // 判断是否已经超出进度条的长度
          if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
            this.sliderLeft = e.pageX - distance
            this._countCurPercent()
          }
        }
      }
      progress.onmouseup = () => {
        isClickSlider = false
      }
    },
    // 计算百分比
    _countCurPercent() {
      this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))

      this.progressWidth = this.sliderLeft + 20

      // 取整的时候宽度可能不为0， 所以在0和100的时候也将宽度取值
      if (this.tempPercent <= 0) {
        this.progressWidth = 0
        this.sliderLeft = 0
      }

      if (this.tempPercent >= 100) {
        this.progressWidth = this.width = 20
        this.sliderLeft = this.width
      }

      this.$emit("percentChange", this.tempPercent)

    }
  }

}
</script>

<style scoped>
.p_progress {
  display: flex;
  align-items: center;
}
/* 进度条容器 */
.p_progress_container_outer {
  width: 300px;
  height: 10px;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: #dcdfe6;
  border-radius: 10px;
}
/* 进度条 */
.p_progress_container_outer .p_progress-inner{
  width: 100%;
  height: 10px;
  background-color: #dcdfe6;
  border-radius: 10px;
}
/* 滑块 */
.p_progress_container_outer .p_progress_slider {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #1890ff;
  background-color: #fff;
  position: absolute;
  z-index: 10px;
  left: 10px;
}
.p_progress_container_outer .p_progress_slider:hover {
  background-color: #1890ff;
}
/* 顶部百分比字体 */
.progress_percent_container {
  width: 32px;
  padding: 2px;
  font-size: 14px;
  font-weight: bold;
  color: #808080;
  background-color: #fff;
  box-shadow: 0px 0px 1px 1px #eee;
  border-radius: 4px;
  position: relative;
  text-align: center;
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
}
.progress_percent_container:after {
  display: block;
  content: "";
  clear: both;
  width: 0px;
  height: 0px;
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fefefe;
}

</style>
